<template>
  <div class="container">
    <!--  -->
    <!-- 左侧主要内容展示区 -->
    <div class="left">
      <div class="label">Authority 组件</div>
      <div class="text">权限控制的组件</div>

      <div class="label">组件效果</div>

      <FoldPanel>
        <template #top>
          <div style="display: flex; flex-wrap: wrap">
            <InputItem label="姓名">
              <el-input
                style="height: 100%; width: 100%"
                v-model="name"
                placeholder="请输入内容"
              />
            </InputItem>

            <InputItem label="年龄">
              <el-input
                style="height: 100%; width: 100%"
                v-model="age"
                placeholder="请输入内容"
              />
            </InputItem>

            <InputItem label="性别" :width="220">
              <el-select
                v-model="sex"
                placeholder="请输入内容"
                size="large"
                style="height: 100%; width: 100%"
              >
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </InputItem>

            <InputItem label="这是一个比较长的标签" :labelWidth="200">
              <el-input
                style="height: 100%; width: 100%"
                v-model="age"
                placeholder="请输入内容"
              />
            </InputItem>

          </div>
        </template>
        <template #bottom>
          <HtmlShower :htmlStr="htmlStr1"></HtmlShower>
        </template>
      </FoldPanel>
    </div>

    <!--  -->
    <!-- 右侧辅助功能栏 -->
    <div class="right">2333</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputItem, HtmlShower, FoldPanel } from '@/customComponents/components'

const name = ref<any>('')
const age = ref<number>(18)
const sex = ref<'男' | '女'>('男')

const htmlStr1 = `
<div style="display: flex; flex-wrap: wrap">
    <InputItem label="姓名">
      <el-input style="height: 100%; width: 100%"  v-model="name"  placeholder="请输入内容" />
    </InputItem>

    <InputItem label="年龄">
      <el-input style="height: 100%; width: 100%"  v-model="age" placeholder="请输入内容" />
    </InputItem>

    <InputItem label="性别" :width="220">
      <el-select v-model="sex"  placeholder="请输入内容"  size="large"  style="height: 100%; width: 100%" >
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </InputItem>
  </div>`
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: space-between;

  > .left {
    width: 76%;
  }
  > .right {
    width: 24%;
  }
}

.label {
  font-size: 17px;
  color: #606266;
  letter-spacing: 1px;
  font-weight: bold;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  padding-top: 30px;
  padding-bottom: 10px;
}

.text {
  line-height: 28px;
  letter-spacing: 1px;
  color: #444444;
  font-weight: b;
}
</style>
